<script setup>
import useUserStore from '@/store/modules/user';
import { ref } from 'vue';
import defautAvatar from '@/assets/images/avatar.png';
const userStore = useUserStore();
const userInfo = ref('');
console.log(userStore.userInfo);
const getInfo = () => {
    const userStore = useUserStore();
    if (userStore.userInfo) {
        userInfo.value = userStore.userInfo;
    } else {
        userStore.getInfo().then(res => {
            userInfo.value = res;
        })
    }
}
getInfo()
// const userInfo = computed(() => userStore.userInfo);
const props = defineProps({
    index: {
        type: Number,
        default: null,
    }
})
</script>
<template>
    <div class="header">
        <router-link :to="{ path: '/' }" class="logo">
            <img src="../../assets/images/LOGO.png" alt="">
        </router-link>
        <div class="nav">
            <ul>
                <li :class="[{ 'active0': index === 0 }]">
                    <router-link :to="{ path: 'ai' }">AI</router-link>
                </li>
                <li :class="[{ 'active1': index === 1 }]">
                    <router-link :to="{ path: 'info' }">资讯</router-link>
                </li>
                <li :class="[{ 'active2': index === 2 }]">
                    <router-link :to="{ path: 'study' }">学习</router-link>
                </li>
                <li :class="[{ 'active3': index === 3 }]">
                    <router-link :to="{ path: 'pms' }">PMS</router-link>
                </li>
            </ul>
        </div>
        <div class="user">
            <div class="isLogin" v-if="userInfo">
                <div class="avatar">
                    <img :src="userInfo?.user_head ? userInfo?.user_head : defautAvatar" class="avatar" />
                </div>
                <div class="nikename">
                    {{ userInfo.user_name }}
                </div>
            </div>
            <div class="noLogin" v-else>
                <router-link :to="{ path: '/login' }" class="login">登录</router-link>
                <router-link :to="{ path: '/register' }" class="register">注册</router-link>
            </div>
            
        </div>
    </div>
</template>
<style lang="scss" scoped>
.isLogin{
    display: flex;
    align-items: center;
    .avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
    }
    .nikename{
        font-family: MiSansVF_Medium;
        font-size: 18px;
        color: #000000;
        line-height: 24px;
    }
}
.header {
    max-width: 1520px;
    min-width: 1200px;
    height: 85px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 60px;
    height: 60px;

    img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

.nav {
    width: 700px;

    ul {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;

        li {
            position: relative;
        }

        li a {
            font-family: MiSansVF_Medium;
            font-size: 18px;
            color: #000000;
            line-height: 24px;
            cursor: pointer;
            text-decoration: none;
        }

        li:after {
            display: block;
            content: '';
            width: 50px;
            height: 4px;
            position: absolute;
            left: 50%;
            bottom: -5px;
            margin-left: -25px;
            border-radius: 2px;
        }
    }
}

.noLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .login {
        margin-right: 30px;
    }

    a {
        text-decoration: none;
        color: #000000;
        font-size: 18px;
    }

    .router-link-active {
        text-decoration: none;

    }
}

.nav ul li.active0 a {
    color: #00BCFB;
}

.active0::after {
    background-color: #00BCFB;
}

.nav ul li.active1 a {
    color: #20D5A8;
}

.active1::after {
    background-color: #20D5A8;
}

.nav ul li.active2 a {
    color: #45A1FF;
}

.active2::after {
    background-color: #45A1FF;
}

.nav ul li.active3 a {
    color: #8145E5;
}

.active3::after {
    background-color: #8145E5;
}
</style>